/**
 * <p>Zxt Grid 交互控件</p>
 * @class
 * @param renderFunc 渲染方法
 */
zxt.ui.GridInteractor = function(renderFunc){
	zxt.ui.Interactor.call(this);
	this._renderFunc = renderFunc;
	this._grid;
	this._rownum;
};


zxt.defineClazz(zxt.ui.GridInteractor, zxt.ui.Interactor);

/**
 * <p>渲染Grid控件</p>
 * @function
 * @return
 */
zxt.ui.GridInteractor.prototype.renderSelf = function(){
	var innner = this._renderFunc(this._grid, this._rownum);
	if ( typeof innner == "string" ) {
		return $(innner).get(0); 
	} else {
		return inner;
	}
};

/**
 * <p>设置GridInteractor的zxt.ui.Grid对象及行号</p>
 * @function
 * @param grid zxt.ui.Grid对象
 * @param rownum 行号
 * @return
 */
zxt.ui.GridInteractor.prototype.setContext = function(grid, rownum){	
  this._grid = grid;
  this._rownum=rownum;
};

/**
 * <p>zxt.ui.GridInteractor工厂类</p>
 * @class
 * @param renderFunc 渲染方法
 */
zxt.ui.GridInteractorFactory = function(renderFunc){
	this._renderFunc = renderFunc;	
};


zxt.defineClazz(zxt.ui.GridInteractorFactory, zxt.ui.InteractorFactory);
/**
 * <p>获取zxt.ui.GridInteractor实例</p>
 * @function
 * @return {zxt.ui.GridInteracto} zxt.ui.GridInteractor实例
 */
zxt.ui.GridInteractorFactory.prototype.getInstance = function(){
	return new zxt.ui.GridInteractor(this._renderFunc);
};

/**
 *<p>表格列对象<p>
 * @class 
 * @param {string} name 列名
 * @param {string} title 列标题
 * @param {int} width 列宽度
 * @param {string} type 列类型
 * @param {zxt.ui.InteractorFactory} interactorFac 用于渲染的交互控件工厂 
 */
zxt.ui.GridColumn = function(name, type, conf, readonly, hidden,title, width, interactorFac){
	this._name = name;
	this._title = title;
	this._width = width || 100;
	this._type = type;	
	this._interactorFac = interactorFac || InteractorManager.getInteractorFactory(this._type);//zxt.ui.js	
	this._readonly = readonly;
	this._hidden = hidden | false;
	this._conf = conf;
	this._columnMeta = null;
};

/**
 * <p>(string) [GETTER | SETTER] 列对象的名称</p>
 *
 * @function
 */
zxt.ui.GridColumn.prototype.name = function(v){
  if (v === undefined) {	return this._name;	}
  this._name = v;
};

/**
 * <p>(string) [GETTER | SETTER] 列对象的标题</p>
 *
 * @function
 */
zxt.ui.GridColumn.prototype.title = function(v){
  if (v === undefined) {
  	if ( zxt.util.isAvailable(this._title) ){
  		return this._title;	
  	}
  	
  	if ( zxt.util.isAvailable(this._columnMeta) ){  		
  		return this._columnMeta.title();
  	}
  	
  	return this._name;		
  	
  }
  this._title = v;
};

/**
 * <p>(int) [GETTER | SETTER] 列对象的宽度</p>
 *
 * @function
 */
zxt.ui.GridColumn.prototype.width = function(v){
  if (v === undefined) {	return this._width;	}
  this._width = v;
};

/**
 * <p>(string) [GETTER | SETTER] 列对象的类型</p>
 *
 * @function
 */
zxt.ui.GridColumn.prototype.type = function(v){
  if (v === undefined) {
  	if ( zxt.util.isAvailable(this._type) ){
  		return this._type;	
  	}
  	
  	if ( zxt.util.isAvailable(this._columnMeta) ){  		
  		return this._columnMeta.type();
  	}
  	
  	return this._type;  	
  }
  this._type = v;
};

/**
 * <p>(boolean) [GETTER | SETTER] 列对象的只读属性</p>
 *
 * @function
 */
zxt.ui.GridColumn.prototype.readonly = function(v){
  if (v === undefined) {
  	if ( zxt.util.isAvailable(this._readonly) ){
  		return this._readonly;	
  	}
  	
  	if ( zxt.util.isAvailable(this._columnMeta) ){
  		var readonly = this._columnMeta.readOnly() || this._columnMeta.primaryKey();  		
  		return readonly;
  	}
  	
  	return this._readonly;  	
  }
  this._readonly = v;
};

/**
 * <p>(object) [GETTER | SETTER] 列对象的交互控件工厂</p>
 *
 * @function
 */
zxt.ui.GridColumn.prototype.interactorFac = function(v){
  if (v === undefined) {	return this._interactorFac;	}
  this._interactorFac = v;
};

/**
 * <p>列对象的配置</p>
 * @function
 * @param v 配置参数,如显示格式
 * @return
 */
zxt.ui.GridColumn.prototype.conf = function(v){
  if (v === undefined) {
  	if ( zxt.util.isAvailable(this._conf) ){
  		return this._conf;	
  	}
  	
  	if ( zxt.util.isAvailable(this._columnMeta) ){
  		return this._columnMeta.conf();
  	}
  	
  	return this._conf;  	
  }
  this._conf = v;
};

/**
 * <p>隐藏列对象</p>
 * @function
 * @param v 隐藏标志,true:隐藏
 * @return
 */
zxt.ui.GridColumn.prototype.hidden = function(v){
  if (v === undefined) {	return this._hidden;	}
  this._hidden = v;
};

/**
 * <p>列对象的属性设置</p>
 * @function
 * @param v zxt.ui.GridColumn 
 * @return
 */
zxt.ui.GridColumn.prototype.columnMeta = function(v){
  if (v === undefined) {	return this._columnMeta;	}
  this._columnMeta = v;
};

/**
 * <p>该类是表格组件的基类, 支持了表格的基本特性; 用户不应该直接使用该类, 而是使用其子类ZxtModeGrid;
 * 除了基本的渲染功能外, 该表格基类支持的特性还包括了:
 * <ul>
 *  <li>表格的前台排序</li>
 *  <li>表格列宽度调整</li>
 *  <li>和数据源的绑定</li>
 * </ul>
 * </p>
 * @class
 * @param m {zxt.data.TableModel} 列表存储模型
 */
zxt.ui.GridBase = function(m, a){
	
	zxt.ui.Composite.call(this);
	
	if ( m == undefined ){
		return;
	}

	
	this.model = m;
	this.model.addListener(this);
	
	this._columns = [];
	this._gridData = [];//数据
	
	this._autoDraw = a;
	if ( a == undefined ){
		this._autoDraw = true;
	}	
	
	this._start0 = 0;
	this._imit0 = 0;
	
	this._start = 0;//数据源加载数据的起点
	this._limit = 0;

	this._fixHeight = false;
	this._height = 190;

	this._rows = new Array();	

	this._$jqSkeleton = $("<table class=zxt-DataGrid cellspacing=0 cellpadding=0 />").attr("table-layout","fixed").attr("width","100%");

	this._$jqDataDiv = null;
	this._$jqDataTable = null;
	this._$jqDataTbody = null;//包含数据的TableBody
	
	this._$jqHeadDiv=null;
	
	this._status = 0; // 1==resizing
	this._szColumn;	
	this._originPosX = -1;	
	this._originPosY = -1;	
	
		
	//this._buildColumns();
};


zxt.defineClazz(zxt.ui.GridBase, zxt.ui.Composite);
/**
 * <p>列表头间的间隔距离</p>
 * @function
 */
zxt.ui.GridBase.prototype.splitWidth = 1;

/**
 * <p>列表的Border宽度</p>
 * @function
 */
zxt.ui.GridBase.prototype.borderWidth = 0;

/**
 * <p>获取控件类型</p>
 * @function 
 * @returns {string} "zxt.ui.GridBase"
 */
zxt.ui.GridBase.prototype.getType = function(){
  return "zxt.ui.GridBase";
};

/*
 * @private
 */
zxt.ui.GridBase.prototype.autoDraw = function(){
	return this._autoDraw;	
};	

/**
 * <p>该函数有两个功能: 当不传参数时, 返回从数据源加载数据, 传入参数时, 设置数据源加载数据</p>
 * @function
 * @param v {Array} 数据
 * @return {Array} 不传参数时, 返回从数据源加载数据
 */
zxt.ui.GridBase.prototype.gridData = function(v){
	if(v===undefined){return this._gridData;}
	this._gridData = v;	
};

/**
 * <p>该函数有两个功能: 当不传参数时, 返回从数据源加载数据的起点, 传入参数时, 设
 * 置数据源加载数据的起点</p>
 *
 * @function
 * @param {int} v 设置加载数据起点时传入起点序号
 * @returns {int} 不传参时, 返回加载数据起点序号
 */
zxt.ui.GridBase.prototype.start = function(v){
  if (v === undefined) {	return this._start;	}
  this._start = v;
};

/**
 * <p>该函数有两个功能: 当不传参数时, 返回从数据源加载数据的条数, 传入参数时, 设
 * 置数据源加载数据的条数</p>
 *
 * @function
 * @param {int} v 设置加载数据的条数
 * @returns {int} 不传参时, 返回加载数据的条数
 */
zxt.ui.GridBase.prototype.limit = function(v){
  if (v === undefined) {	return this._limit;	}
  this._limit = v;
};

/**
 * <p>该函数有两个功能: 当不传参数时, 返回当前设置的表格固定高度, 传入参数时, 设
 * 置表格固定高度</p>
 *
 * @function
 * @param {int} v 设置的表格固定高度
 * @returns {int} 不传参时, 返回当前设置的表格固定高度
 */
zxt.ui.GridBase.prototype.fixHeight = function(v){
  if (v === undefined) {	return this._fixHeight;	}
  this._fixHeight = v;
};

/**
 * <p>该函数有两个功能: 当不传参数时, 返回当前设置的表格高度, 传入参数时, 设
 * 置表格高度</p>
 *
 * @function
 * @param {int} v 设置的表格高度
 * @returns {int} 不传参时, 返回当前设置的表格高度
 */
zxt.ui.GridBase.prototype.height = function(v){  
  if (v === undefined) {	return this._height;	}
  this._height = v;
};

/**
 * <p>表格初次加载，获取数据，建立列对象</p>
 * @function
 * @return
 */
zxt.ui.GridBase.prototype.initLoad = function(){
	this._gridData = this.model.get(this._start, this._limit);//加载首页数据
  this._buildColumns();
};	

/**
 * <p>建立列对象</p>
 * @function
 * @private
 * @return
 */
zxt.ui.GridBase.prototype._buildColumns = function(){
	if ( this._autoDraw ){
		var modCols = this.model.getColumns();
		for(var i=0; i<modCols.length;i++){
			var _modCol = modCols[i];
			
			var _col = new zxt.ui.GridColumn(_modCol.name());
			_col.columnMeta(_modCol);
			
			var _viewFac = InteractorManager.getInteractorFactory(_modCol.type());
			_col.interactorFac(_viewFac);
			this._columns.push(_col);
		}
	}	
};

/**
 * <p>返回指定行的数据起始行号</p>
 * @function
 * @private
 * @param {int} rownum 行号
 * @return {int} 数据集起始行号
 */
zxt.ui.GridBase.prototype._getModelIndex = function(rownum){
	return this._start + rownum;
};

/**
 * <p>获取指定行的数据</p>
 * @function
 * @private
 * @param {int} rownm 行号
 * @return {Array}  指定行的数据
 */
zxt.ui.GridBase.prototype._getRow = function(rownum){
	var interactor = this._rows[rownum];
	return interactor;
};

/**
 * <p>返回表格的行数</p>
 *
 * @function
 * @returns {int} 表格的行数
 */
zxt.ui.GridBase.prototype.getRowCount = function(){
	return this._rows.length;
};	

/**
 * <p>获取所有的表格数据</p>
 * @function
 * @return {Array} 所有的表格数据
 */
zxt.ui.GridBase.prototype.getGridData = function(){
	var data = [];
	for( var i=0; i<this._rows.length; i++ ){
		var rd = this.getRowData(i);
		data.push(rd);
	};	
	return data;
};

/**
 * <p>返回指定行的原始数据</p>
 *
 * @function
 * @param {int} rownum 行号
 * @returns {object} 指定行的原始数据
 */
zxt.ui.GridBase.prototype.getRowOld = function(rownum){
	var idx = this._getModelIndex(rownum);
	return this.model.load(idx);
};

/**
 * <p>返回指定行的当前数据</p>
 *
 * @function
 * @param {int} rownum 行号
 * @returns {object} 指定行的当前数据
 */
zxt.ui.GridBase.prototype.getRowData = function(rownum){
	var trInteractor = this._rows[rownum];
	return trInteractor.getValue();
};	

/**
 * <p>返回指定行的DOM节点元素</p>
 *
 * @function
 * @param {int} rownum 行号
 * @returns {object} 指定行的DOM节点元素
 */
zxt.ui.GridBase.prototype.getRowDom = function(idx){
  var interactor = this._rows[idx];
  var newVal = interactor.getValue();
  interactor.setValue( newVal );
  return interactor.render();
};

/**
 * <p>设置行变色</p>
 *
 * @function
 * @param {int} idx 行号
 */
zxt.ui.GridBase.prototype.addRowColor = function(idx){
  var interactor = this._rows[idx];
  this._gridData[idx].choosed = true;
  interactor.changeColor(true);
};

/**
 * <p>取消行变色</p>
 *
 * @function
 * @param {int} idx 行号
 */
zxt.ui.GridBase.prototype.removeRowColor = function(idx){
  var interactor = this._rows[idx];
  this._gridData[idx].choosed = false;
  interactor.changeColor(false);
};

/**
 * <p>表格新增一行显示传入的数据</p>
 *
 * @function
 * @param {object} rowd 新增行显示的数据
 * @returns {zxt.ui.GridRow} 新增行对象
 */
zxt.ui.GridBase.prototype.addRowData = function(rowd){
	var _rowd = rowd || {};
	var _rowNum = this._rows.length;
	var _gridRow = new zxt.ui.GridRow(this, _rowNum); 
	this.addChild(_gridRow);
	       
	_gridRow.setValue(_rowd);
	this._$jqDataTbody.append(_gridRow.render());	
	this._rows.push(_gridRow);
	return _gridRow;
};	

/**
 * <p>获取列对象集合</p>
 * @return {zxt.ui.GridColumn} 列对象集合
 */
zxt.ui.GridBase.prototype.getColumns = function(){	
	return this._columns;	
};	

/**
 * <p>获取指定名称的表格列对象</P>
 *
 * @function
 * @param {string} col 列名,通常为ID
 * @returns {zxt.ui.GridColumn} 相应于传入列名的列对象, 如果没有相应的列返回null;
 */
zxt.ui.GridBase.prototype.getColumn = function( col ){
	var cols = this.getColumns();
	
	for( var i=0; i<cols.length; i++ ) {
		var column = cols[i];
		if (column.name() == col){
			return column;
		}
	}
  return null;  
};

/**
 * <p>获取指定列的宽度</p>
 *
 * @function
 * @param {string} col 指定列名
 * @returns {int} 指定列的宽度
 */
zxt.ui.GridBase.prototype.getColumnWidth = function( col ){
	var column = this.getColumn(col);
	if ( column == null ){
		throw new Error("Column NOT Found : [" + col + "]");
	}	
	return column.width();
};

/**
 * <p>设置指定列的宽度</p>
 *
 * @function
 * @param {string} col 指定列名
 * @param {int} size 指定列的宽度
 */
zxt.ui.GridBase.prototype.setColumnWidth = function( col, size ){
	var _col = this.getColumn(col);
	if (_col == null){
		return;
	}	
	 _col.width(size);
	
	if ( this._$jqHeadDiv != null ){//列表头不为空
		var div_w = this.splitWidth*2;
		var _width = size - div_w + this.borderWidth;
	   
		this._$jqHeadDiv.find("td[column=" + col + "]").width(_width);
		this._$jqDataDiv.find("th[column=" + col + "]").width(size);
		this._$jqDataDiv.find("td[column=" + col + "]").width(size);      
	};	
};

/**
 * <p>设置列的可见性</p>
 * @function
 * @param {String} col 列名
 * @param {boolean}show 可见性  true:可见
 * @return 如果指定的列不存在，返回空
 */
zxt.ui.GridBase.prototype.setColumnVisible = function( col, show ){
	var _col = this.getColumn(col);
	if (_col == null){
		return;
	}	
	_col.hidden(!show);
};

/**
 * <p>根据传入的配置参数新增一列，如果没有指定位置，则直接新增；否则，在指定位置插入新的列对象</p>
 * @function
 * @private
 * @param {zxt.ui.GridColumn} column 列对象
 * @param {int} pos 指定位置 
 * @return
 */
zxt.ui.GridBase.prototype._addColumn = function( column, pos ){
	if ( pos == undefined ){
		this._columns.push(column);
	} else {
		this._columns.splice(pos, 0, column);
	}
};

/**
 * <p>根据传入的配置参数新增一列</p>
 *
 * @function
 * @param {map} conf 新增列的配置
 * @param {string} conf.name 新增列名
 * @param {string} conf.title 新增列的标题
 * @param {int} conf.width 新增列的宽度
 * @param {string} conf.type 新增列的类型
 * @param {function} conf.render 新增列的渲染函数
 */
zxt.ui.GridBase.prototype.addColumn = function( conf ){
	var interactorFac = null;
	if ( zxt.util.isFunction(conf.render) ){
		interactorFac = new zxt.ui.GridInteractorFactory(conf.render);  
	} else if( zxt.util.isNotNull(conf.interactorFac) ){
		interactorFac = conf.interactorFac;
	} else {
		interactorFac = InteractorManager.getInteractorFactory(conf.type);
	};
		
	var column = new zxt.ui.GridColumn(conf.name, conf.type, conf.conf, conf.readonly, conf.hidden, conf.title, conf.width, interactorFac);
	
	if ( zxt.util.notValue(conf.pos) ){
		this._addColumn(column);		
	} else {
		this._addColumn(column, conf.pos);
	}  
};


/**
 * <p>滚动条事件处理方法</p>
 * @function
 * @param {Event} e 表格横向滚动条事件
 */
zxt.ui.GridBase.prototype.scroll = function(e) {
  this._$jqHeadDiv.get(0).scrollLeft = this._$jqDataDiv.get(0).scrollLeft;	
};

/**
 * <p>刷新表格数据</p>
 *
 * @function
 */

zxt.ui.GridBase.prototype.refresh = function(){		
  this._rows = [];
  this._$jqDataDiv.empty();//先清空数据
  this._gridData = this.model.get(this._start, this._limit);  //不同的MODEL，get方法会有不同
  var dataTable = this._renderTable(this._gridData);  
  this._$jqDataDiv.append( dataTable ); 
};

/**
 * <p>侦听翻页控件的回调函数, 表格会在该函数中从数据源重新加载指定的数据.</p>
 *
 * @function
 * @param {int} s 翻页控件的起始序号 
 * @param {int} l 翻页控件的每页条数
 */
zxt.ui.GridBase.prototype.scrollTo = function( s, l ){	
	this._start = s;
  this.limit(l);
	this.refresh();//刷新数据
};


/**
 * @private
 * @param {zxt.ui.GridRow} trDom  GridRow对象
 * @param {String} col 列名
 * @param rowI
 * @return {String} 单元格数据
 */
zxt.ui.GridBase.prototype._getSortVal = function( trDom, col, rowI ){
	var _dataIdx = trDom._dataIdx;	
	var trInteractor = this._rows[_dataIdx];
	var _rowD = trInteractor.getValue();
	return _rowD[col];
	
};	

/**
 * @private
 * @param v1
 * @param v2
 * @return
 */
zxt.ui.GridBase.prototype._compareSortVal = function( v1, v2 ){	
	var f1 = parseFloat(v1);
  var f2 = parseFloat(v2);
  if (!isNaN(f1) && !isNaN(f2)) {
    v1 = f1;
    v2 = f2;
  }

	if (v1 == v2)
		return 0;
	if (v1 > v2)
		return 1;
	return -1;	
};

/**
 * <p>根据指定列名, 对表格进行升降序的排序</p>
 *
 * @function
 * @param {string} col 排序的列名
 * @param {boolean} rev true - 升序, false - 降序
 *
 */
zxt.ui.GridBase.prototype.sort = function( col, rev ){	
	
	var tblEl = this._$jqDataTbody.get(0);//zxt.ui.Grid

  if (tblEl.reverseSort == null) {//创建reverseSort属性
		tblEl.reverseSort = new Array(); 
		tblEl.lastColumn = null;
  }

	if (tblEl.reverseSort[col] == null)
		tblEl.reverseSort[col] = rev;

	if (col == tblEl.lastColumn)
		tblEl.reverseSort[col] = !tblEl.reverseSort[col];

	tblEl.lastColumn = col;

  var oldDsply = tblEl.style.display;
  //tblEl.style.display = "none";

  var tmpEl;
  var i, j;
  var minVal, minIdx;
  var testVal;
  var cmp;

	for (i = 0; i < tblEl.rows.length - 1; i++) {
		minIdx = i;
		var trD = tblEl.rows[i];
		minTr = trD;
		minVal = this._getSortVal(trD, col, i);

		for (j = i + 1; j < tblEl.rows.length; j++) {
			var trD2 = tblEl.rows[j];
			testVal = this._getSortVal(trD2, col, j);
			cmp = this._compareSortVal(minVal, testVal);
			if (tblEl.reverseSort[col]) cmp = -cmp;		
						
				
			if (cmp > 0) {
				minIdx = j;
				minTr = trD2;
				minVal = testVal;
			}
		}

		if (minIdx > i) {
			tmpEl = tblEl.removeChild(tblEl.rows[minIdx]);
			tblEl.insertBefore(tmpEl, tblEl.rows[i]);
    }
    
    $(minTr).removeClass("zxt-TableRow0").removeClass("zxt-TableRow1");
    $(minTr).addClass("zxt-TableRow" + (i & 1) );
  }
  
  var _maxIdx = tblEl.rows.length - 1; 
  $(tblEl.rows[_maxIdx]).removeClass("zxt-TableRow0").removeClass("zxt-TableRow1");
  $(tblEl.rows[_maxIdx]).addClass("zxt-TableRow" + (_maxIdx & 1) );
  
  

	tblEl.style.display = oldDsply;	
};	

/**
 * <p>事件接收处理器</p>
 * @function
 * @ignore　
 * @param {Event} e 事件
 * @param {Object} param 参数
 */
zxt.ui.GridBase.prototype.accept = function(e, param){  
  if (  e === zxt.data.TableModelEvents.PRM ){  	
    this.scrollTo(this._start0, this._limit0);
    return;
  };
  
  if ( e === zxt.data.TableModelEvents.DEL || e === zxt.data.TableModelEvents.NEW){
    this.scrollTo(this._start, this._limit);
    return;
  };
  
  if ( e === zxt.data.TableModelEvents.UPD  ){
   this.scrollTo(this._start, this._limit);
   return;
  }
};

/**
 * <p>把该表格渲染成DOM节点</p>
 *
 * @function
 * @return {DOM} 渲染成的DOM节点
 */
zxt.ui.GridBase.prototype.renderSelf = function(){  
	this._rendrSkelton();
	var dataTable = this._renderTable(this._gridData);
	this._$jqDataDiv.append( dataTable );
	return this._$jqSkeleton.get(0);
};

zxt.ui.GridBase.prototype._rendrSkelton = function(){
	var host = this;
	
	this._$jqSkeleton.empty();
	var jqHeadTr = $("<tr>"); 
	var jqHeadTd = $("<td>"); 
	var jqHeadDiv = $("<div style='overflow:hidden;width:100%'>");
	jqHeadDiv.append( this._renderHeader() );//加载表头
	jqHeadTd.append(jqHeadDiv);
	jqHeadTr.append(jqHeadTd);
	this._$jqSkeleton.append(jqHeadTr);

	var jqDataTr = $("<tr>"); 
	var jqDataTd = $("<td>"); 
	var jqDataDiv = $("<div style='overflow:auto;width:100%'>");
	if ( this._fixHeight ){//如果设置了固定高度，则取固定高度的数值
			jqDataDiv.height(this._height);
	};
	jqDataTd.append(jqDataDiv);
	jqDataTr.append(jqDataTd);
	this._$jqSkeleton.append(jqDataTr);
	jqDataDiv.get(0).onscroll = function(e){ var event = system.getEvent(e); host.scroll(event); }; 

	this._$jqHeadDiv = jqHeadDiv;
	this._$jqDataDiv = jqDataDiv;
};

/**
 * <p>加载表头</p>
 * @function
 * @private
 * @return {DOM} 列表头
 */
zxt.ui.GridBase.prototype._renderHeader = function(){
	var instance = this;	
	var jqTable = $("<table border=0 cellpadding=0 cellspacing=0 width=100% ><thead class=zxt-TableRowHeader></thead></table>");
	jqTable.css("table-layout","fixed");
	
	var jqTr = $("<tr class='zxt-TableHeadings'/>"); 
	
	var div_w = null;
	for( var i=0; i<this._columns.length; i++ ) {
		var col = this._columns[i];
		
		if ( !col.hidden() ){		
			if ( div_w == null ) { div_w = this.splitWidth;	} else { div_w = this.splitWidth*2;	};
			var _colName = col.name(); 		
			var _width = col.width() - div_w + this.borderWidth;
					
			var jqTd = $("<td headSplit='0' column='"+ col.name() +"' width=" + _width + "><div style='text-align:center;overflow:hidden;white-space:nowrap;'>"+ col.title() +"</div></td>");		
			var jqSeperator = $( "<td headSplit='1' col='"+ col.name() +"' nowrap align=center width=" + this.splitWidth*2 + " style='cursor:e-resize;'>" + "<div style='width:1px;height:25px;BACKGROUND:#a0a0a0; float:left;'></div><DIV style='WIDTH: 1px; BACKGROUND:#ffffff ; HEIGHT: 25px;float:left;'></DIV></td>"); 
			
			//鼠标悬置高亮显示
			jqTd.hover(	function(){	$(this).addClass("zxt-Highlight"); },	function(){	$(this).removeClass("zxt-Highlight");	}	);		
			
			//绑定列单击事件，默认是排序
			function handler(event) { instance.headClicked(this, event.data.column); }
			jqTd.bind("click", {column: _colName}, handler);		
			//jqTd.click( function(){ instance.headClicked(this, _colName) } );
			
			//用鼠标调整列宽时的列分割线设置
			jqSeperator.mousedown( function(event){ instance._onSplitterMousedown(this,event); } ).mouseup(	function(event){ instance._onSplitterMouseup(this,event);	} );
			
			jqTr.append(jqTd).append(jqSeperator);
		}
	}
	var tailTd = $("<td width=100%><div style='width: 100%;'/></td>");
	jqTr.append(tailTd);
	
	var jtTbody = $("<tbody>");
	jtTbody.append(jqTr);
	jqTable.append(jtTbody);
	
	//列表头的鼠标移动调整列表头宽度事件
	jqTr.mousemove(
			function(event){
				instance._onHeaderMousemove(this,event);
			}
	);
	
	jqTr.mouseup(
			function(event){
				instance._onHeaderMouseUp(this,event);
			}
	);
	
	return jqTable.get(0);
};

/**
 * <p>渲染表格数据</p>
 * @param {Array} list 表格数据
 * @return {DOM} 表格数据DOM节点
 */
zxt.ui.GridBase.prototype._renderTable = function(list){
	if ( this._$jqDataTable == null){//数据为空，创建空的DOM节点	
		this._$jqDataTable = $("<table class='zxt-Table' cellpadding=0 cellspacing=0 width=100%><thead class=zxt-TableRowHeader></thead></table>");
		this._$jqDataTable.css("table-layout","fixed");	
		if (zxt.util.isAvailable(this.id()) && zxt.cfg.nameNative) {
			this._$jqDataTable.attr("name", this.id());
		};
		this._$jqDataTbody = $("<tbody>");
	} else {//翻页时数据不为空,清空表头,已重新加载
		$(">thead", this._$jqDataTable).empty();
		//this._$jqDataTable.empty();
	};	
	
	if ( !this._fixHeight){		
		if ( list.length == 0 )
			this._$jqDataDiv.height(17);
		else 
			this._$jqDataDiv.height("auto");				
	};
	
	var jqDataHeaderTr = $("<tr class='zxt-TableDataHead' />");
	for( var i=0; i<this._columns.length; i++ ){//加载表头设置
		var col = this._columns[i];
		if ( !col.hidden() ){
			var jqTd = $("<th column='"+ col.name() +"' width=" + col.width() + ">");
			jqDataHeaderTr.append(jqTd);
		}
	};		
	var tailTd = $("<td width=100%></td>");
	jqDataHeaderTr.append(tailTd);
	$(">thead", this._$jqDataTable).append(jqDataHeaderTr);//加载表头设置
		
	var rowDoms = [];
	this._rows = [];
	for( var idx=0; idx<list.length; idx++ ){
		var row = list[idx];
		var _gridRow = new zxt.ui.GridRow(this, idx); 
		this.addChild(_gridRow);
		this._rows.push(_gridRow);
		_gridRow.setValue(row);
		rowDoms.push(_gridRow.render());
		if(row.choosed){//如果被选中的话则变色
			_gridRow.changeColor(true);
		}
	}	
	this._$jqDataTbody.empty().append(rowDoms);	
	
	this._$jqDataTable.append(this._$jqDataTbody);
	return this._$jqDataTable.get(0);
};

/**
 * <p>单元格选中方法，可以被重写</p>
 * @function
 * @param {zxt.ui.GridRow} row 行对象
 * @param {DOM} td  DOM节点
 * @return
 */
zxt.ui.GridBase.prototype._cellClicked = function(row, td){
	
};

/**
 * <p>调整列的分割线时，鼠标在元素上点击后会触发的方法</p>
 * @function
 * @private
 * @param {DOM} _src 选择的DOM节点
 * @param {Event} evt 鼠标事件
 * @return
 */
zxt.ui.GridBase.prototype._onSplitterMousedown = function(_src,evt){
	
	if ( this._status == 1 ){
			return;
	}	
	
	//$(_src).parent().children().css("cursor", "e-resize");
	
	var col = $(_src).attr("col");//取列头名
	this._status = 1;
	this._szColumn = col;
	this._originPosX = evt.screenX;		
	this._originPosY = evt.screenY;	
	window.status = this._szColumn;
};

/**
 * @private
 * @ignore 无用方法
 * @param _src
 * @param evt
 * @return
 */
zxt.ui.GridBase.prototype._onSplitterMousemove = function(_src,evt){
	if ( this._status != 111 ){//111?
			return;
	}
	
	var pos_x = evt.screenX;
	var pos_y = evt.screenY;
	var delta_px = pos_x-this._originPosX;
	
	
	var oldWidth = this.getColumnWidth(this._szColumn);
	var newWidth = oldWidth + delta_px;
	this.setColumnWidth(this._szColumn, newWidth);
	
	this._originPosX = pos_x;
	this._originPosY = pos_y;	
	
};

/**
 * <p>调整列的分割线时，鼠标在元素上释放时会触发的方法：恢复标志</p>
 * @function
 * @private
 * @param  {DOM} _src 操作的DOM节点
 * @param  evt   鼠标事件  
 * @return
 */
zxt.ui.GridBase.prototype._onSplitterMouseup = function(_src,evt){	
	this._status = 0;	
	this._szColumn = null;
	this._originPosX = -1;		
	this._originPosY = -1;	
};

/**
 * <p>调整列的分割线触发列宽调整事件鼠标移动触发的方法</p>
 * @function
 * @private
 * @param {DOM} _src 操作的DOM节点
 * @param evt 鼠标事件
 * @return
 */
zxt.ui.GridBase.prototype._onHeaderMousemove = function(_src,evt){
	if ( this._status != 1 ){
			return;
	}	
	
	var pos_x = evt.screenX;
	var pos_y = evt.screenY;
	var delta_px = pos_x - this._originPosX;
	window.status= this._originPosX + "-" + pos_x + "=" + delta_px;
	
	var oldWidth = this.getColumnWidth(this._szColumn);
	var newWidth = oldWidth + delta_px;
	
	if( newWidth <30 ){return;} //如果和1比较，可以全列隐藏，但数据尚在
	
	this.setColumnWidth(this._szColumn, newWidth);
	this._originPosX = pos_x;
	this._originPosY = pos_y;	
};	

/**
 * <p>调整列的分割线触发列宽调整事件鼠标释放时触发的方法</p>
 * @function
 * @private
 * @param {DOM} _src 操作的DOM节点
 * @param evt 鼠标事件
 * @return
 */
zxt.ui.GridBase.prototype._onHeaderMouseUp = function(_src,evt){
	this._status = 0;	
	this._szColumn = null;
	this._originPosX = -1;		
	this._originPosY = -1;	
};	

/**
 * <p>列表头被单击的事件处理, 缺省做该列的排序操作;
 * 可以重设该函数来定制事件逻辑;
 * </p>
 * @function
 * @param {String} colName 列名
 * @event 
 */
zxt.ui.GridBase.prototype.headClicked = function(dom, colName){
 this.sort(colName, false);//降序
};

/**
 * <p>列表行数据点击选中处理方法</p>
 * @function
 * @param {DOM} dom 操作的DOM节点
 * @param {int} idx 行号
 * @return
 */
zxt.ui.GridBase.prototype.rowClick = function(dom, idx){
	var interactor = this._rows[idx];
	for( var i=0; i<this._gridData.length; i++ ){
		var row = this._gridData[i];
		if(row.clicked){//如果被选中的话则变色
			this._gridData[i].clicked = false;
			this._rows[i].changeColor(false,"zxt-TableRow-Clicked");
		}
	}	
  	this._gridData[idx].clicked = true;
  	interactor.changeColor(true,"zxt-TableRow-Clicked");
  	if(this.mode()!="DISABLE"&&this.mode()!="READONLY"){
  		this.rowClicked(dom, idx);	
  	}
};


/**
 * <p>数据行单击的事件处理;
 * 可以重设该函数来定制事件逻辑;</p>
 *
 * @event 
 */
zxt.ui.GridBase.prototype.rowClicked = function(dom, idx){
 
};

/**
 * <p>数据行双击的事件处理;
 * 可以重设该函数来定制事件逻辑;</p>
 *
 * @event 
 */
zxt.ui.GridBase.prototype.rowDoubleClicked = function(dom, idx){ 
};
	

/**
 * <p>数据行上鼠标移入的事件处理;
 * 可以重设该函数来定制事件逻辑;</p>
 *
 * @event 
 */
zxt.ui.GridBase.prototype.rowHover = function(dom, idx){
  $(dom).addClass("zxt-RowCurrent");
};

/**
 * <p>数据行上鼠标移出的事件处理;
 * 可以重设该函数来定制事件逻辑;</p>
 *
 * @event 
 */
zxt.ui.GridBase.prototype.rowHoverOut = function(dom, idx){
  $(dom).removeClass("zxt-RowCurrent");
};

/**
 * <p>行对象</p>
 * @class
 * @param {zxt.ui.GridRow} pGrid 行对象
 * @param {int} idx 行对象下标
 * @param {String} state 行对像的状态：<p>取值自zxt.type.Mode(zxt.core.js){VIEW:"view",	EDIT:"edit",CRET:"cret"} </p>
 */
zxt.ui.GridRow = function(pGrid, idx, state) {
	zxt.ui.Record.call(this);//zxt.ui.js
	
  this.grid = pGrid;  
  this._index = idx;
  this._columns = this.grid._columns; 
  this._$jqSkeleton = null;
  this._state = state;
  this._colorChanged = false; //记录该行有没有变色
};


zxt.defineClazz(zxt.ui.GridRow, zxt.ui.Record);
/**
 * <p>获取控件类型</p>
 * @function 
 * @return {String} 控件类型
 */
zxt.ui.GridRow.prototype.getType = function(){
	return "zxt.ui.GridRow";
};

/**
 * <p>行对象的数据下标，即行号</p>
 * @function
 * @return  行对象的数据下标
 */
zxt.ui.GridRow.prototype.index = function(){
	return this._index;
};	

/**
 * <p>该函数有两个功能: 当不传参数时, 返回当前设置的行对象状态, 传入参数时, 设
 * 置行对象状态</p>
 * @function
 * @param {String} v 行对像的状态
 * @return {String} 当不传参数时, 返回当前设置的行对象状态
 */
zxt.ui.GridRow.prototype.state = function(v){
  if (v === undefined) {	return this._state;	}
  this._state = v;
};

/**
 * @ignore
 * 
 * 
 */
zxt.ui.GridRow.prototype._cellClicked = function(td){
};	

/**
 * <p>把该表格的行对象渲染成DOM节点</p>
 *
 * @function
 * @return {DOM} 渲染成的DOM节点
 */
zxt.ui.GridRow.prototype.renderSelf = function(){	
  if ( this._$jqSkeleton == null ){//初次加载
  	this._layInteractors();
  	//this._renderInteractors();  
  } else { 
  	this._renderInteractors();  //zxt.ui.Record.prototype._renderInteractors
  };
  return this._$jqSkeleton.get(0);
};

/**
 * <p>为列表行添加颜色</p>
 * @param {boolean} addColor 布尔值 true为增加 false为移除
 * @param {CSS}     样式
 * 
 */
zxt.ui.GridRow.prototype.changeColor = function(addColor,css){
	if (addColor) {
		this._$jqSkeleton.addClass(css?css:"zxt-TableRow-Select");
	} else{
		this._$jqSkeleton.removeClass(css?css:"zxt-TableRow-Select");
	};
};

/**
 * <p>加载行对象数据</p>
 * @function
 * @private
 * @return
 */
zxt.ui.GridRow.prototype._layInteractors = function(){

	var host = this;
	this._$jqSkeleton = $("<tr class=zxt-TableRow"+ (this._index & 1) +">");
	this._$jqSkeleton.hover( function(){ host.grid.rowHover(this, host._index) }, function(){ host.grid.rowHoverOut(this,host._index) } );
	this._$jqSkeleton.click( function(){ host.grid.rowClick(this, host._index) } );
	if(this.mode() != "DISABLE"&&this.mode() != "READONLY"){
		this._$jqSkeleton.dblclick( function(){ host.grid.rowDoubleClicked(this, host._index) } );
	}
	this._$jqSkeleton.get(0)._dataIdx = this._index;	

	var tds = [];
	for( var i=0; i<this._columns.length; i++ ){
		var col = this._columns[i];		
		var _int = col.interactorFac().getInstance();	
		this.addChild(_int);
		
		var _val = this.val()[col.name()];		
		_int.conf(col.conf());		
		_int.setValue(_val);
		
		if (  zxt.util.isFunction(_int.setContext) ){
			_int.setContext(this.grid, this._index);
		};
		this.mapInteractor(col.name(), _int);	
		
		if ( !col.hidden() ){
			//var jqTd = $("<td column='"+ col.name() +"' style='width: " + col.width() + ";'>");		
			var jqTd = $("<td column='"+ col.name() +"' width=" + col.width() + ">");		
			jqTd.click( function(){ host.grid._cellClicked(host, this) } );		
						
			jqTd.append( _int.render() ); 		
			//this._$jqSkeleton.append(jqTd);		
			tds.push(jqTd.get(0));
		}	
	};
	
	this._$jqSkeleton.append(tds);
	
	var tailTd = $("<td class='zxt-TableTail' width=100%><div style='width: 100%;'/></td>");
	this._$jqSkeleton.append(tailTd);
};

/**
 * <p>响应消息的处理</p>

 * @function
 * @param {zxt.core.Message} msg 接受到的消息
 */
zxt.ui.GridRow.prototype.onMessage = function(msg){	
	var _event_type = msg.type;	
	switch(_event_type){
		case zxt.core.MESSAGETYPE.WM_MODE_CHANGE://zxt.message.js
			var _mode = msg.data.mode;			
			for( var i in this._interactors ){
				this._interactors[i].onMessage( new zxt.core.Message( zxt.core.MESSAGETYPE.WM_MODE_CHANGE, {mode: _mode} ) );	
			}	
		
			break;
		default:	
	};		
};	



/**
 * <p>数据表格类</p>
 *
 * @class 
 * @extends zxt.ui.GridBase
 */
zxt.ui.DataGrid = function(m, conf) {
	var config = {
		editMode : 3,
		selMode  : 1,
		autoDraw : true
	};
	
	$.extend(config, conf);	//扩展zxt.ui.DataGrid对象本身,增加config方法
	this._editMode = config.editMode; // 0:readonly, 1:full-edit, 2:row-edit, 3:row-lazy, 4:cell-edit	
	this._selMode =  config.selMode;  // 0:none, 1:check, 2:radio	
	this._autoDraw = config.autoDraw;
	
	this._selCol = "$check";	
	
	zxt.ui.GridBase.call(this, m, this._autoDraw);
	
	//this._addSelectCol();	
	this._checked = {};
	this._single = null;
	
	this._optButtons = [];	
	this._operations = [zxt.type.Operation.CREATE, zxt.type.Operation.SAVE, zxt.type.Operation.DELETE];	
};

/**
 * <p>根据传入的DOM元素, 解析传入的相关属性, 创建相应的表格对象</p>
 *
 * @function
 * @static
 * @param {DOM} elem 解析的DOM元素
 * @return {zxt.ui.DataGrid} 根据传入的DOM元素创建的表格对象
 */
zxt.ui.DataGrid.parse = function(elem){
	var j = $(elem);
	
	var _modelStr = j.attr("zxt.model");
	var _model = window[_modelStr];//取得数据列表
	
	var _startStr = j.attr("zxt.start");	
	var _start = parseInt(_startStr);//数据源加载起始点
	
	var _limitStr = j.attr("zxt.limit");	
	var _limit = parseInt(_limitStr);
		
	var _fixStr = j.attr("zxt.fixHeight");
	var _fix = _fixStr == "true"? true:false;//固定高度设置
	
	var _height = 190;
	var _heightStr = j.attr("zxt.height");
	if ( zxt.util.isValue(_heightStr) ){
		_height = parseInt(_heightStr);		//设置表格高度		
	};	
		
	var _selModeStr = j.attr("zxt.selMode");	
	var _selMode = parseInt(_selModeStr);//选择模式
	
	var _editModeStr = j.attr("zxt.editMode");	
	var _editMode = parseInt(_editModeStr);//编辑模式
	
	var conf = {};
	conf.selMode = _selMode;
	conf.editMode = _editMode;
	
	var _instance = new zxt.ui.DataGrid(_model, conf);
	_instance._start0 = _start;
	_instance._limit0 = _limit;
	_instance.start(_start);
	_instance.limit(_limit);
	
	_instance.fixHeight(_fix);
	_instance.height(_height);
		
	_instance.initLoad();
	
	$(">div", j ).each( function( idx, dom )//找到Grid控件中所有的DIV组
		{
			var jdom = $(dom);
			var _column = jdom.attr("zxt.column");
			var _title = jdom.attr("zxt.title");	
			var _width = jdom.attr("zxt.width");	
			var _hidden = jdom.attr("zxt.hidden");
			
			var column = _instance.getColumn(_column);		
			column.title(_title);
			
			if ( zxt.util.isValue(_width) ){
				var width = parseInt(_width);			
				column.width(width);
			}
			
			var hidden = _hidden == "true" ?true:false;
			column.hidden(hidden);
			
			var _conf = {};
			var s_conf = jdom.attr("zxt.conf");	
			if ( zxt.util.isLengthString(s_conf) ){
				_conf = eval( "({"+ s_conf +"})" );					
			};
			
			var optDoms = $(">div[conf=Check]", jdom );
			if (optDoms.length > 0){
				_conf["check"] = optDoms.attr("zxt.check");
				_conf["uncheck"] = optDoms.attr("zxt.uncheck");
			};
			
			var optDoms = $(">div[conf=Options]", jdom );
			if (optDoms.length > 0){
				var optDom = optDoms.get(0);
				var composite = zxt.data.parseOptions(optDom);
				var options = [];
				composite.loadTo(options);
				_conf["_options"] = options;
			};
			
			var oldConf = column.conf();
			if ( zxt.util.isValue(oldConf) ){
				$.extend(oldConf, _conf);
			}	else {
				column.conf(_conf);
			}
		}
	);
		
	return _instance;
};


zxt.defineClazz(zxt.ui.DataGrid, zxt.ui.GridBase);
/**
 * <p>返回控件的类型</p>
 *
 * @function
 * @return {String} "zxt.ui.DataGrid"
 */
zxt.ui.DataGrid.prototype.getType = function(){
	return "zxt.ui.DataGrid";
};

/**
 * <p>[GETTER | SETTER] 表格的编辑模式</p>
 * <p>0:只读模式 | 1:全表编辑 | 2:单行编辑 | 3:单元格编辑 | 4:单元格切换编辑</p>
 *
 * @function
 * @param {int} v 编辑模式编号
 * @return {int} 当没有参数传入时,返回当前的编辑模式
 */
zxt.ui.DataGrid.prototype.editMode = function(v){
  if (v === undefined) {	return this._editMode;	}
  this._editMode = v;
};

/**
 * <p>[GETTER | SETTER] 表格的选择模式</p>
 * <p> 0:无选择 | 1:多选框(checkBox) | 2:单选框(radioButton) </p>
 *
 * @function
 * @param {int} 选择模式编号
 * @return {int} 当没有参数传入时,返回当前的选择模式
 */
zxt.ui.DataGrid.prototype.selMode = function(v){
  if (v === undefined) {	return this._selMode;	}
  this._selMode = v;
};


/**
 * <p>获取选中的行号列表</p>
 * @function 
 * @returns {int[]} 选中的行号数组
 */
zxt.ui.DataGrid.prototype.getCheckedRows = function(){
	var _checks = [];
	for( var i =0; i<this._rows.length; i++ ){
		var _row = this._rows[i];
		var _rowCheck = _row.getInteractor("$check");
		if ( _rowCheck.checked() ){
			_checks.push(i);
		}	
	}
	return _checks;	
};

/**
 * <p>设置指定行的选中状态</p> 
 *
 * @function
 * @param {int} rownum 行号
 * @param {boolean} ck 选中状态
 */
zxt.ui.DataGrid.prototype.setRowChecked = function(rownum, ck){	
	var _gridRow = this._rows[rownum];
	var ckI = _gridRow.getInteractor("$check");//获得行对象的$check列
	ckI.setValue(ck);
	ckI.render();	
	if ( ck ){
		this._checkRow(_gridRow);
	} else {
		this._uncheckRow(_gridRow);
	}		
};

/**
 * <p>添加列对象</p>
 * @function
 * @private
 * @param {zxt.ui.GridColumn} column 列对象
 * @param {int} pos 位置 
 * @return
 */
zxt.ui.DataGrid.prototype._addColumn = function( column, pos ){
			
	if ( pos == undefined ){
		this._columns.push(column);
	} else {
		this._columns.splice(pos, 0, column);
	}
};

/**
 * <p>添加选择的列对象</p>
 * @function
 * @private
 * @param {zxt.ui.GridColumn} column 列对象
 * @param {int} pos 位置 
 * @return
 */
zxt.ui.DataGrid.prototype._addSelectCol = function( column, pos ){	
	switch( this._selMode ){
		case 1://1:多选框  
			this.addColumn({ pos:0, name:"$check", title: "C", width: 20, type: "checkbox"} );
			break;		
		case 2://2:单选框
			this.addColumn({ pos:0, name:"$check", title: "R", width: 20, type: "radiobox", conf:{group:"group1"} } );						
			break;
		default:	
	}
};	

/**
 * <p>建立列对象</p>
 * @function
 * @private
 * @override 重写了zxt.ui.GridBase.prototype._buildColumns
 * @return
 */
zxt.ui.DataGrid.prototype._buildColumns = function(){	
	if ( this._autoDraw ){		
		var modCols = this.model.getColumns();
		for(var i=0; i<modCols.length;i++){
			var _modCol = modCols[i];
			
			var _mode = zxt.type.Mode.VIEW;
			if ( this._editMode == 1 ){
				_mode = zxt.type.Mode.EDIT;
			}	
			
			var _col = new zxt.ui.GridColumn(_modCol.name());			
			var _interFac = new zxt.ui.ColumnInteractorFactory(_col, _mode);
			_col.columnMeta(_modCol);
			_col.interactorFac(_interFac);
			this._addColumn(_col);
		}	
	};
	//判断是否添加勾选列
	this._addSelectCol();		
};

/**
 * <p>检查表的编辑模式，并根据信息进行相应的操作</p>
 * @function
 * @private 
 * @param {zxt.ui.GridRow} gridRow 
 * @return
 */
zxt.ui.DataGrid.prototype._checkRow = function(gridRow){ 

	if  ( this._editMode == 1 ){//1:全表编辑	
		if ( gridRow.state() == zxt.type.Mode.CRET ){
			gridRow.onMessage( new zxt.core.Message( zxt.core.MESSAGETYPE.WM_MODE_CHANGE, {mode: zxt.type.Mode.CRET} ) );	
		}		
	} else if ( this._editMode == 2 ){//2:单行编辑		
		if ( gridRow.state() == zxt.type.Mode.CRET ){
			gridRow.onMessage( new zxt.core.Message( zxt.core.MESSAGETYPE.WM_MODE_CHANGE, {mode: zxt.type.Mode.CRET} ) );					
		} else {
			gridRow.onMessage( new zxt.core.Message( zxt.core.MESSAGETYPE.WM_MODE_CHANGE, {mode: zxt.type.Mode.EDIT} ) );				
		}		
	}		
};
	
/**
 * 
 * @function
 * @private
 * @param gridRow
 * @return
 */
zxt.ui.DataGrid.prototype._uncheckRow = function(gridRow){
	
	if ( this._editMode == 2 || this._editMode == 3 ){
		gridRow.onMessage( new zxt.core.Message( zxt.core.MESSAGETYPE.WM_MODE_CHANGE, {mode: zxt.type.Mode.VIEW} ) );				
	}
};

/**
 * @function
 * @private
 * @param gridRow
 * @param col
 * @return
 */
zxt.ui.DataGrid.prototype._dataCellClicked = function(gridRow, col){
	if ( this._selMode == 0 ) return;
		
	if ( this._editMode == 3 ){
		var interactor = gridRow.getInteractor(col);	
		var checkbox = gridRow.getInteractor("$check");
		if ( checkbox.checked() ){
			var _state = zxt.type.Mode.EDIT;
			if ( gridRow.state() == zxt.type.Mode.CRET ){
				_state = zxt.type.Mode.CRET;
			}				
			interactor.onMessage( new zxt.core.Message( zxt.core.MESSAGETYPE.WM_MODE_CHANGE, {mode: _state} ) );
		}
	} 
};

/**
 * @function
 * @private
 * @param gridRow
 * @param col
 * @return
 */
zxt.ui.DataGrid.prototype._checkCellClicked = function(gridRow, col){
	if ( this._selMode == 0 ) return;
	if ( this._editMode == 0  || this._editMode == 1 ) return;
	
	
	var checkbox = gridRow.getInteractor("$check");
	if ( checkbox.checked() ){
		this._checkRow(gridRow);		
	} else {				
		this._uncheckRow(gridRow);
	};	
};

/**
 * <p>单元格点击方法</p>
 * @param  {zxt.ui.GridRow} gridRow 行对象
 * @param {DOM} td DOM 节点
 * @return
 */
zxt.ui.DataGrid.prototype._cellClicked = function(gridRow, td){	
	var _col = $(td).attr("column");		
	if ( _col == "$check"  ){
		this._checkCellClicked(gridRow, _col);
	} else {
		this._dataCellClicked(gridRow, _col);
	};
};	

/**
 * <p>关联操作按钮</p>
 * @param optButton 操作按钮
 * @return
 */
zxt.ui.DataGrid.prototype.addAttachButton = function(optButton){
	this._optButtons.push(optButton);
	optButton.enable(false);	
	for( var i=0; i<this._operations.length; i++ ){
		if ( this._operations[i] == optButton.operation() ){
			optButton.enable(true);
		}	
	}
};	

/**
 * <p>表格的创建方法</p>
 * @function 
 * @param {Object} a 行数据集合 
 * @return
 */
zxt.ui.DataGrid.prototype.create = function(a){
	var _gridRow = this.addRowData();
	_gridRow.state(zxt.type.Mode.CRET);
	this.setRowChecked(_gridRow.index(), true);		
	
	for( var i in this._optButtons ){
  	var _butt = this._optButtons[i];
  	_butt.onMessage( new zxt.core.Message( zxt.core.MESSAGETYPE.WM_OPERATION_SUPPORT, {opts: [zxt.type.Operation.CREATE, zxt.type.Operation.SAVE, zxt.type.Operation.DELETE]} ) );
  }
};

/**
 * <p>表格的删除方法</p>
 * @function 
 * @param {Object} a 行数据集合 
 * @return
 */
zxt.ui.DataGrid.prototype.remove = function(a){
	
	var _data = [];
	var _ckRows = this.getCheckedRows();
	for( var i=0; i<_ckRows.length; i++ ){
		var _ckRow = _ckRows[i];
		var _rowD = this.getRowData(_ckRow);
		_data.push(_rowD);
	}
	
	this.model.remove(_data, a);
	
	for( var i in this._optButtons ){
		var _butt = this._optButtons[i];
		_butt.onMessage( new zxt.core.Message( zxt.core.MESSAGETYPE.WM_OPERATION_SUPPORT, {opts: [zxt.type.Operation.CREATE, zxt.type.Operation.SAVE, zxt.type.Operation.DELETE]} ) );
	}	
};	

/**
 * <p>表格的保存操作</p>
 * @function
 * @param {Object} 行数据集合
 * @return
 */
zxt.ui.DataGrid.prototype.save = function(a){
	
	var _data = [];
	var _ckRows = this.getCheckedRows();	
	for( var i=0; i<_ckRows.length; i++ ){
		var _ckRow = _ckRows[i];		
		var _row = this._getRow(_ckRow);
		var _rowD = this.getRowData(_ckRow);
		_data.push(_rowD);
	}
	
	if ( _row.state() == zxt.type.Mode.CRET ){
			this.model.add(_data, a);
		} else {
			this.model.save(_data, a);
		}
		
	for( var i in this._optButtons ){
		var _butt = this._optButtons[i];
		_butt.onMessage( new zxt.core.Message( zxt.core.MESSAGETYPE.WM_OPERATION_SUPPORT, {opts: [zxt.type.Operation.CREATE, zxt.type.Operation.SAVE, zxt.type.Operation.DELETE]} ) );
	}	
};	

/**
 * <p>表格清空</p>
 * @function
 * @return
 */
zxt.ui.DataGrid.prototype.empty = function(){
	var option = 2;
	if ( option == 1 ){
		this._rendrSkelton();	
		var dataTable = this._renderTable([]);
		this._$jqDataDiv.append( dataTable );
		return this._$jqSkeleton.get(0);
	} else {
		this.model.clear();
	};
};

/**
 * 返回表格支持的操作列表, 表格支持的操作包括
 * <ul>
 *  <li>{@link zxt.type.Operation.CREATE} - 新增操作</li>
 *  <li>{@link zxt.type.Operation.SAVE}   - 保存操作</li>
 *  <li>{@link zxt.type.Operation.DELETE} - 删除操作</li>
 * </ul>
 * @function
 * @returns {string[]} 表格支持的操作列表
 */
zxt.ui.DataGrid.prototype.getSupportOperations = function(){
	return [zxt.type.Operation.CREATE, zxt.type.Operation.SAVE, zxt.type.Operation.DELETE];
};	

/**
 * <p>响应消息的处理</p>
 *
 * @function
 * @param {zxt.core.Message} msg 接受到的消息
 */
zxt.ui.DataGrid.prototype.onMessage = function(msg){
	var _event_type = msg.type;
	
	switch(_event_type){
		case zxt.core.MESSAGETYPE.WM_OPERATION_INVOKE:
			var _opt = msg.data.opt;
			if( _opt == zxt.type.Operation.CREATE ){
				this.create();
				break;
			}
						
			if ( _opt == zxt.type.Operation.DELETE ){
				this.remove();
				break;
			}
			
			if ( _opt == zxt.type.Operation.SAVE ){
				this.save();
				break;
			}
			
			break;
		
		default:	
	};	
};				

/**
 * <p>把表格对象数据转成字符串</p>
 * @function
 * @return {String}  字符串
 */
zxt.ui.DataGrid.prototype.toString = function(){
	return  zxt.help.getGridString(this);
}
